<style scoped>
    .com_top .inp {
        width: 180px;
    }

    .el-table .disabled-row {
        background: oldlace;
    }

    .model_assets_list .btns {
        border-top: solid 1px #eee;
        padding: 35px 0 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }

    .model_assets_list .ml {
        margin-left: 20px;
    }

    .model_assets_list .common_pages {
        justify-content: flex-start;
    }

    .assets_item_list:nth-child(odd) {
        border-bottom: solid 1px #eee;
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .assets_item_list.first {
        border-bottom: none;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    .assets_item_item {
        font-size: 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .assets_item_item .as_1 {
        display: inline-block;
        width: 250px;
    }

    .assets_item_item .as_2 {
        display: inline-block;
        width: 150px;
    }

    .model_assets_list .b_t {
        padding-top: 15px;
        border-top: solid 1px #eee;
    }

    .select_app {
        font-size: 22px;
        text-align: center;
        margin: 50px auto;
        text-align: center;
        color: #999;
        font-weight: 300;
    }

    .el-tabs-content {
        background: #fff;
        padding: 15px;
        box-shadow: 5px 5px 10px #eee;
    }
    .assets-item{
        margin-bottom:0px;
    }
    .assets-item .t0{
        display: inline-block;
        font-size:12px;
        margin-right:10px;
    }
    .assets-item .t1{
        width:180px;
    }
    .assets-item .t2{
        width:130px;
    }
    .assets-item .t3{
        width:130px;
    }
    .assets-item .t4{
        width:100px;
    }
    .el-table__expanded-cell[class*=cell] {
        padding: 10px 50px;
    }
    .el-form-item__content{
        line-height:25px;
    }
    .demo-table-expand{
        padding-left:60px;
    }
</style>
<div class="content" id="team" v-cloak>
    <el-row>
        <el-col :span="12">
            <div class="grid-content bg-purple com_title">构建日志</div>
        </el-col>
    </el-row>
    <div class="com_top">
        <el-select v-model="environ_code" class="inp" @change="environChange" placeholder="部署环境筛选">
            <el-option v-for="item in environlist" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="team_code" class="inp" @change="teamChange" placeholder="所属团队筛选">
            <el-option v-for="item in teamlist" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="application_id" class="inp" @change="getList" placeholder="请选择所属应用">
            <el-option v-for="item in applist" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <el-input v-model="name" class="inp ml20" placeholder="按应用名称查询"></el-input>
        <el-button @click="getList" type="primary">搜索</el-button>
    </div>
    <el-tabs class="el-tabs-content" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item,index) in logtypelist" :key="index" :label="item.label" :name="item.value">
            <!-- table -->
            <div class="com_table_block mt20" v-if="datalist.length">
                <div class="table_body">
                    <el-table :data="datalist" style="width: 100%">
                        <el-table-column type="expand">
                            <template slot-scope="scope">
                                <el-form label-position="left" inline class="demo-table-expand">
                                    <div v-for="(item,index) in scope.row.content" :key="index">
                                        <el-form-item class="assets-item">
                                            <span class='t0 t1'>资产名称:{{item.assets_name}}</span>
                                            <span class='t0 t2'>外网IP:{{item.outer_ip}}</span>
                                            <span class='t0 t3'>内网IP:{{item.lan_ip}}</span>
                                            <span v-if="item.code==0?true:false" class='t0 t4 success'>{{typetext}}成功</span>
                                            <span v-if="item.code!=0?true:false" class='t0 t4 red'>{{typetext}}失败</span>
                                        </el-form-item>
                                    </div>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column prop="name" label="任务名称" width="320">
                        </el-table-column>
                        <el-table-column :label="typetext+'状态'" width="150">
                            <template slot-scope="scope">
                                <div class="success" v-if="scope.row.status==0">{{typetext}}成功</div>
                                <div class="warning" v-if="scope.row.status==1">部分{{typetext}}成功</div>
                                <div class="red" v-if="scope.row.status==2">{{typetext}}失败</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="user_name" label="操作人" width="120">
                        </el-table-column>
                        <el-table-column :label="typetext+'时间'" width="200">
                            <template slot-scope="scope">
                                <div>{{scope.row.create_time | date('-',true)}}</div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <div>
                                    <el-button @click="buildProcess(scope.row)" type="text" size="mini">重新{{typetext}}</el-button>
                                    <el-button v-if="activeName==2" @click="goToReduction(scope.row)" type="text" size="mini">应用还原</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="common_pages">
                    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage"
                        :page-size="pageSize" layout="prev, pager, next, jumper" :total="totalCount">
                    </el-pagination>
                </div>
            </div>
            <!-- empty -->
            <div class="select_app" v-if="!datalist.length">
                <div>暂无需要部署的应用,请新建环境和应用!</div>
            </div>
        </el-tab-pane>
    </el-tabs>
</div>
<script>
    new Vue({
        el: '#team',
        data: function () {
            return {
                team_code:'',
                environ_code:'',
                application_id:'',
                name:'',
                activeName: '1',
                typetext:'构建',
                teamlist: [],
                datalist: [],
                environlist:[],
                applist:[],
                pageSize: 30,
                totalCount: 0,
                currentPage: 1,
                logtypelist: [{
                    value: '1',
                    label: '应用构建日志',
                }, {
                    value: '2',
                    label: '应用备份日志',
                }, {
                    value: '3',
                    label: '生成应用配置日志',
                },{
                    value: '5',
                    label: '应用还原日志',
                }],
            }
        },
        watch:{
            "activeName"(val){
                if (val == 1) this.typetext = '构建';
                if (val == 2) this.typetext = '备份';
                if (val == 3) this.typetext = '配置';
                if (val == 5) this.typetext = '还原';
            },
        },
        mounted() {
            this.getList();
            this.getTeamList();
            this.getEnvironList();
            this.getAppList();
        },
        filters: {
            date:Filter.date,
        },
        methods: {
            handleClick(tab, event) {
                this.getList();
            },
            getList() {
                util.ajax({
                    type: 'get',
                    url: `${config.baseApi}api/v1/logs/list`,
                    data: {
                        application_id: this.application_id,
                        name: this.name,
                        type: this.activeName,
                        pageNo: this.currentPage,
                        pageSize: this.pageSize,
                    },
                    success: data => {
                        const datas = data.data.datalist || [];
                        datas.forEach(item=>{
                            if(item.content && item.content.length) {
                                let begin = 0;
                                len = item.content.length;
                                item.content.forEach(item1=>{
                                    if(item1.code ==0) begin++
                                })
                                if(item.content.length == begin){
                                    item.status = 0;
                                }else if(begin == 0){
                                    item.status = 2;
                                }else {
                                    item.status = 1;
                                }
                            }
                        });
                        this.totalCount = data.data.totalNum;
                        this.datalist = datas;
                    }
                })
            },
            getAppList() {
                util.ajax({
                    type: 'get',
                    url: `${config.baseApi}api/v1/application/list`,
                    data: {
                        team_code: this.team_code,
                        environ_code: this.environ_code,
                        status: 1,
                        pageNo: 1,
                        pageSize: 100,
                    },
                    success: data => {
                        const datas = data.data.datalist || [];
                        const options = [];
                        datas.forEach(item => {
                            options.push({
                                value: item._id,
                                label: item.name
                            })
                        })
                        this.applist = options;
                    }
                })
            },
            getTeamList() {
                util.ajax({
                    type: 'get',
                    url: `${config.baseApi}api/v1/team/list`,
                    data: {
                        pageNo: 1,
                        pageSize: 100,
                        status: 1,
                    },
                    success: data => {
                        const datas = data.data.datalist || [];
                        const options = [];
                        datas.forEach(item => {
                            options.push({
                                value: item.code,
                                label: item.name
                            })
                        })
                        this.teamlist = options;
                    }
                })
            },
            getEnvironList() {
                util.ajax({
                    type: 'get',
                    url: `${config.baseApi}api/v1/environment/list`,
                    data: {
                        pageNo: 1,
                        pageSize: 100,
                    },
                    success: data => {
                        const datas = data.data.datalist || [];
                        const options = [];
                        datas.forEach(item => {
                            options.push({
                                value: item.code,
                                label: item.name
                            })
                        })
                        this.environlist = options;
                    }
                })
            },
            environChange(){
                this.application_id = '';
                this.getAppList();
            },
            teamChange(){
                this.application_id = '';
                this.getAppList();
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList();
            },
            buildProcess(item) {
                location.href = "/buildprocess?id=" + item.application_id;
            },
            goToReduction(item) {
                location.href = "/reduction?id=" + item.application_id;
            },
        }
    })
</script>